<template>
  <div class="page_recommendPersons">
    <van-nav-bar title="结算记录" left-arrow @click-left="$router.push('/recommend_persons')" />

    <com-search-by-date @getCalendarValue="toGetCalendarValue" :label="'结算'"></com-search-by-date>

    <div
      class="detail_title"
      style="margin-top: 10px; box-sizing: border-box; text-align: center"
      v-if="recordList.length"
    >
      <com-recommend-item
        :item="itemObj"
        v-for="itemObj in recordList"
        :key="itemObj.id"
        :routeName="$route.name"
      ></com-recommend-item>
      <van-pagination
        v-model="pageIndex"
        style="margin-top: 10px"
        :total-items="totalRecord"
        :items-per-page="pageSize"
        force-ellipses
        @change="handleChange"
      />
    </div>

    <van-divider style="margin-top: 99px" v-else>无数据</van-divider>
  </div>
</template>

<script>
import comRecommendItem from '../../components/comRecommendItem'
import comSearchByDate from '../../components/comSearchByDate'
export default {
  name: 'personDetail',
  components: {
    comRecommendItem,
    comSearchByDate
  },
  data() {
    return {
      recordList: [],
      pageIndex: 1,
      pageSize: 10,
      totalRecord: 0,
      date: '',
      recommendPersons_id: ''
    }
  },

  created() {
    if (this.$route.params.id) {
      this.recommendPersons_id = this.$route.params.id;
      this._getBuyRecordList();
    } else {
      this.$router.back()
    }
  },

  methods: {
    toGetCalendarValue(val) {
      this.date = val
      this._getBuyRecordList()
    },
    handleChange(value) {
      // 加上接口
      this.pageIndex = value
      this._getBuyRecordList()
    },
    async _getBuyRecordList() {
      // 分页参数
      const params = {
        id: this.recommendPersons_id,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        date: this.date
      }

      const res = await this.$api.others.reqMyRecommendPersondetail(params);
      // console.log('返回____________', res);
      if (res.code === 200){
        this.recordList = res.data.items;
        this.totalRecord = res.data.count;
      };

      /*if (res) {
        this.recordList = []
        res.data.items.forEach(item => {
          this.recordList.push(item)
        })
      }*/

    }
  }
}
</script>

<style lang="scss" scoped>
.page_recommendPersons {
  width: 100%;
  box-sizing: border-box;
  .detail_title {
    background-color: #ffffff;
    padding-bottom: 1.1px;
  }
  .over_layer {
    margin-top: 46px;
    height: 100%;
    .layer {
      width: 36%;
      font-size: 14px;
      position: absolute;
      right: 0;
      z-index: 2;
    }
  }
  .head_title {
    height: 100px;
    width: 150px;
    border-radius: 50%;
    color: #fff;
    background-color: #0099ff;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
  }
  .recommend_list {
    padding-bottom: 50px;
    box-sizing: border-box;
    background-color: #ffffff;
    font-size: 0.32rem;
  }
  .recommend_item {
    font-size: 0.32rem;
  }
  .bottomPage {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
}
</style>
